<template>
  <div class="home">
    <van-nav-bar>
      <template #left>
        <van-image fit="cover" :src="require('@/assets/logo.png')"></van-image>
      </template>
      <template #right>
        <van-button
          @click="$router.push('/search')"
          class="btn-search"
          round
          icon="search"
          type="info"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 推荐频道 -->
    <van-tabs v-model="active" class="my-tabs">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <article-list :channel_id="item.id" />
      </van-tab>
      <!-- 频道旁边的图标 -->
      <van-icon @click="show = true" class="icon-channel" name="wap-nav" />
    </van-tabs>

    <!-- 频道选择 -->
    <van-action-sheet v-model="show" title="频道选择">
      <!-- <channel-edit
        :ownChannels="channels"
        :allChannels="allChannels"
        :value="active"
        @input="active = $event"
        @close="show = false"
      /> -->
      <!-- 等同于下方写法，v-model的语法糖 -->
      <channel-edit
        :ownChannels="channels"
        :allChannels="allChannels"
        v-model="active"
        @close="show = false"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { channelsAPI, channelsAllAPI } from '@/api'
import { getChannel } from '@/utils/storage.js'
import articleList from './articleList.vue'
import channelEdit from './channelEdit.vue'
export default {
  name: 'home',
  components: {
    articleList,
    channelEdit
  },
  data () {
    return {
      active: 0,
      channels: [],
      allChannels: [],
      show: false
    }
  },
  async created () {
    // 我的频道
    // 判断是否登录了
    // if (this.$store.state.tokenObj.token) {
    //   // 登录了
    //   const res = await channelsAPI()
    //   // console.log(res)
    //   this.channels = res.data.data.channels
    // } else {
    //   // 获取本地存储
    //   const res = getChannel()
    //   // 本地有值
    //   if (res) {
    //     this.channels = res
    //   } else {
    //     // 没值发请求
    //     const res = await channelsAPI()
    //     this.channels = res.data.data.channels
    //   }
    // }

    // 优化上面代码
    // 先取出本地的值
    const local = getChannel()
    // 要么登录了，要么没数据
    if (this.$store.state.tokenObj.token || !local) {
      const res = await channelsAPI()
      this.channels = res.data.data.channels
    } else {
      // 没登录但是有值
      this.channels = local
    }

    // 所有频道
    const res2 = await channelsAllAPI()
    // console.log(res2)
    this.allChannels = res2.data.data.channels
  }
}
</script>

<style lang="less" scoped>
.home {
  height: 100vh;
  ::v-deep.van-nav-bar__left {
    .van-image__img {
      width: 120px;
    }
  }
  .btn-search {
    background-color: rgba(255, 255, 255, 0.2);
    width: 90px;
    height: 30px;
    .van-icon {
      color: #fff;
    }
  }
  .my-tabs {
    ::v-deep .van-tabs__nav {
      width: 83%;
    }

    .icon-channel {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 30px;
      width: 10%;
      text-align: center;
    }
  }
}
</style>
